/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-02-08 22:34:54
 * @LastEditTime: 2023-08-31 16:36:29
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import {
  Box,
  Button,
  Container,
  Flex,
  Heading,
  Stack,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
// import { FaArrowRight } from 'react-icons/fa';
import { Link } from 'react-router-dom';

import { APP_HOME_HERO_SLOGAN, APP_HOME_HERO_TITLE } from '@/config/constants';
export default function Hero() {
  // const navigate = useNavigate();
  return (
    <Container
      maxW="3xl"
      h="full"
      flexGrow={1}
      display="flex"
      justifyContent="center"
      alignItems="center"
    >
      <Stack as={Box} textAlign="center" spacing={8} pb={32}>
        <Heading
          fontWeight={500}
          fontSize="6xl"
          lineHeight="110%"
          color={useColorModeValue('#333333', 'base.200')}
        >
          {APP_HOME_HERO_TITLE}
        </Heading>
        <Text
          as="span"
          fontSize="lg"
          color={useColorModeValue('#666666', 'base.300')}
        >
          {APP_HOME_HERO_SLOGAN}
        </Text>

        <Flex justify="center" align="center">
          <Button
            as={Link}
            to="/aigc"
            rounded="full"
            fontWeight="500"
            w="14rem"
            bg={useColorModeValue('#000', 'base.200')}
            color="base.1000"
            sx={{
              svg: {
                fill: 'base.500',
                _hover: {
                  fill: 'base.1000',
                },
              },
              _hover: {
                bg: useColorModeValue('base.100', 'base.300'),
                svg: {
                  fill: 'base.1000',
                },
              },
            }}
          >
            开始创作
          </Button>
        </Flex>
      </Stack>
    </Container>
  );
}
